<template>
  <div class="transcripts-wrapper">
    <div
      style="
        display: flex;
        height: 40px;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
      "
    >
      <el-text class="" style="width: 80%" truncated>
        {{ courseInfo.course_name }}
      </el-text>
      <div
        style="
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 0 20px;
        "
      >
        <Export
          :file-name="courseInfo.course_name"
          :origin="videoParagraphs.Paragraphs"
        />
      </div>
    </div>
    <div
      style="height: calc(100% - 40px); display: flex"
      class="video-container"
    >
      <div class="left" style="width: 50%; min-width: 200px">
        <div class="video-wrapper">
          <div
            class="video-tools"
            style="
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              gap: 6px;
            "
          >
            <el-input
              v-if="showSearchInput"
              v-model="keyWords"
              style="max-width: 500px"
              placeholder="请输入内容回车进行搜索"
              class="input-with-select"
              clearable
              @keyup.enter="handleSearch()"
            >
              <template #append>
                <el-divider direction="vertical" v-if="searchLimit > 0" />
                <span
                  v-if="searchLimit > 0"
                  class="flex align-items-center"
                  style="gap: 3px"
                >
                  <el-icon @click="handleSearch('prev')" class="pointer">
                    <ArrowLeftBold />
                  </el-icon>
                  {{ searchIndex }} / {{ searchLimit }}
                  <el-icon @click="handleSearch()" class="pointer">
                    <ArrowRightBold />
                  </el-icon>
                </span>
                <el-divider direction="vertical" border-style="dashed" />
                <span style="cursor: pointer" @click="handleClickSearch">
                  取消
                </span>
              </template>
            </el-input>
            <template v-else>
              <div class="item" @click="handleClickSearch">
                <el-icon class="active-icon" size="20">
                  <Search />
                </el-icon>
              </div>
              <div class="item">
                <el-popover
                  placement="bottom-end"
                  width="fit-content"
                  :show-arrow="false"
                  trigger="hover"
                >
                  <div class="filter-content" style="min-width: 200px">
                    <div style="font-weight: 700; color: #000; font-size: 14px">
                      筛选
                    </div>
                    <div class="mark">
                      <el-checkbox
                        v-model="onlyMarked"
                        label="只看标记内容"
                        size="large"
                        @change="handleMarkChange"
                      />
                      <div
                        style="
                          display: flex;
                          gap: 20px;
                          width: 100%;
                          height: 32px;
                          align-items: center;
                          border-bottom: 1px solid #ccc;
                        "
                      >
                        <div
                          v-for="(i, index) in iconList.slice(0, 2)"
                          :key="index"
                          @click.stop="handleToggleMark(i)"
                          class="activemark"
                          :style="{
                            backgroundColor: selectedMark.includes(i.value)
                              ? mapColor[i.value]
                              : '',
                            fontSize: '14px',
                          }"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="i.tip"
                            placement="top"
                            :show-arrow="false"
                          >
                            <el-icon
                              color="#fff"
                              class="icon-hover"
                              :style="{
                                backgroundColor: i.color,
                                borderRadius: '50%',
                              }"
                            >
                              <Component :is="i.icon" />
                            </el-icon>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                    <div class="speaker">
                      <el-checkbox
                        v-model="showSpeaker"
                        label="显示发言人"
                        size="large"
                      />
                      <div class="speaker-list" v-if="showSpeaker">
                        <el-checkbox
                          label="全选"
                          v-model="selectedAll"
                          @change="handleMarkChange"
                        />
                        <el-checkbox-group
                          v-model="checkList"
                          @change="handleMarkChange"
                        >
                          <el-checkbox
                            v-for="item in videoParagraphs.speakerList"
                            :label="item.SpeakerId"
                            :value="item.SpeakerId"
                          />
                        </el-checkbox-group>
                      </div>
                    </div>
                  </div>
                  <template #reference>
                    <el-icon class="active-icon" size="20"><Filter /></el-icon>
                  </template>
                </el-popover>
              </div>
              <div class="item" style="font-size: 12px">
                <Pick
                  @confirm="handleAddToNote"
                  :icon="iconList.slice(0, 2)"
                ></Pick>
              </div>
              <div class="item" style="font-size: 12px">
                <span
                  class="active-icon translate"
                  :class="{ selected: viewType === 1 }"
                  @click="handleSetViewType(1)"
                >
                  译
                </span>
              </div>
              <div class="item" style="font-size: 12px">
                <el-icon
                  size="22"
                  @click="handleTranslateFromAI(3)"
                  :color="viewType === 3 ? '#645def' : '#000'"
                >
                  <AiWriteIcon />
                </el-icon>
              </div>
            </template>
          </div>
          <div
            class="video-player"
            style="width: calc(100% - 30px); background-color: #000"
          >
            <video ref="videodomRef" controls style="width: 100%; height: 100%">
              <source :src="courseInfo.file_url" />
            </video>
          </div>
        </div>
        <div class="speaker-wrapper">
          <div class="spokesman" ref="domRef" @scroll="handleScroll">
            <div
              class="spoke-wrapper"
              v-if="videoParagraphs.Paragraphs?.length"
              v-for="item in videoParagraphs.Paragraphs"
              :key="item"
              :id="item.ParagraphId"
              @click="handleSelect($event, item)"
              :data-time="item.Start"
              :ref="
                (el) => {
                  mapSegment(el, item?.Words[0]?.Start)
                }
              "
            >
              <div
                v-if="showSpeaker"
                class="speaker flex align-items-center margin-bottom-10"
              >
                <div
                  style="
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #605ce5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <text-avatar :text="item.SpeakerId + ''" :width="30" circle />
                </div>
                <div
                  class="username"
                  style="
                    margin-right: 4px;
                    color: #898989;
                    font-size: 14px;
                    margin-left: 5px;
                  "
                >
                  发言人{{ item.SpeakerId }}
                </div>
                <div
                  class="time"
                  style="font-size: 14px; color: #898989; margin-left: 20px"
                >
                  {{ millisecondsToTime(item.Words[0].Start) }}
                </div>
              </div>
              <div
                class="spoke-item"
                :style="{
                  position: 'relative',
                  backgroundColor:
                    item.Words[0].Start <= video_time &&
                    item.Words[item.Words.length - 1].End >= video_time
                      ? '#605ce5'
                      : '#fff',
                  borderColor:
                    hoverSegment.ParagraphId === item.ParagraphId
                      ? '#605ce5'
                      : '#fff',
                  border:
                    hoverSegment.ParagraphId === item.ParagraphId
                      ? '1px solid #605ce5'
                      : '1px solid #fff',
                }"
                @mouseenter="handleMouseEnter(item)"
                @mouseleave="handleMouseLeave()"
              >
                <div
                  v-show="hoverSegment.ParagraphId === item.ParagraphId"
                  style="
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 120px;
                    transform: translateY(-100%);
                    padding: 10px;
                    display: flex;
                    justify-content: space-around;
                  "
                >
                  <div
                    class="icon-hover flex justify-content-center align-items-center"
                    v-for="(i, index) in iconList"
                    :key="index"
                    :style="{
                      backgroundColor: i.color,
                    }"
                    @click.stop="handleMark(item, i)"
                  >
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="i.tip"
                      placement="top"
                      :show-arrow="false"
                    >
                      <el-icon
                        color="#fff"
                        :style="{
                          backgroundColor: i.color,
                          borderRadius: '50%',
                        }"
                      >
                        <Component :is="i.icon" />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </div>
                <div
                  style="
                    position: absolute;
                    width: calc(100% - 20px);
                    color: transparent;
                  "
                  :data-id="item.ParagraphId"
                  v-html="item.html"
                ></div>
                <span
                  v-for="text in item.Words"
                  :class="[
                    text.Start < video_time &&
                    item.Words[0].Start < video_time &&
                    video_time < item.Words[item.Words.length - 1].End
                      ? 'light'
                      : 'origin',
                  ]"
                  :style="{
                    backgroundColor: mapColor[item.Tag]
                      ? `${mapColor[item.Tag]} !important`
                      : '',
                  }"
                >
                  {{ text.Text }}
                </span>
                <div
                  v-if="viewType == 1 && item?.Sentences?.length"
                  @click.stop="() => {}"
                  class="translate"
                  style="
                    background-color: #fff !important;
                    padding: 10px;
                    margin-top: 10px;
                    border-top: 2px solid #f5f5f5;
                  "
                >
                  <span v-for="(en, enIndex) in item.Sentences" :key="enIndex">
                    {{ en.Text }}
                  </span>
                  <div>
                    <span
                      style="
                        background-color: #645def;
                        color: #fff;
                        padding: 2px 4px;
                        font-size: 12px;
                        border-radius: 4px;
                      "
                    >
                      译
                    </span>
                  </div>
                </div>
                <div
                  v-else-if="viewType == 3 && item?.aiTranslate?.length"
                  @click.stop="() => {}"
                  class="translate"
                  style="
                    background-color: #fff !important;
                    padding: 10px;
                    margin-top: 10px;
                    border-top: 2px solid #f5f5f5;
                  "
                >
                  <span>
                    {{ item.aiTranslate }}
                  </span>
                  <div style="display: flex; align-items: center; gap: 8px">
                    <el-icon size="14" color="#645def">
                      <AiWriteIcon />
                    </el-icon>
                    <span style="color: #645def; font-size: 12px">
                      AI改写结果
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="backtop" v-show="scrollTopH > 100">
            <el-icon
              size="20"
              @click="backToTop"
              style="transform: rotate(180deg)"
              ><Download
            /></el-icon>
          </div>
          <div class="achor" v-if="selectedDomId">
            <el-icon
              size="20"
              style="transform: rotate(180deg)"
              @click="handleScrollToDom"
            >
              <Rank />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="resize">⋮</div>
      <div
        class="right"
        style="min-width: 400px; width: 50%; background-color: #fff"
      >
        <RightPanel @search-word="handleSearch()" ref="rightPanelRef" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  computed,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
  defineAsyncComponent,
  provide,
} from 'vue'
import RightPanel from './RightPanel.vue'
import {
  ArrowLeftBold,
  ArrowRightBold,
  Download,
  Filter,
  Rank,
  Search,
} from '@element-plus/icons-vue'
import useCourse from '@/stores/course'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
import TextAvatar from '@/components/text-avatar/index.vue'
import {
  httpGetContentByKey,
  httpGetVideoDetail,
  httpMarkText,
} from '@/api/course'
import { millisecondsToTime } from '@/utils/tools'
import Pick from './components/Pick.vue'
import Export from './components/Export.vue'
const AiWriteIcon = defineAsyncComponent(() => import('@/icons/AiWrite.vue'))
const mapColor = {
  important: 'rgba(125, 220, 255, 0.6)',
  question: 'rgba(255, 158, 203, 0.6)',
}
const iconList = [
  {
    icon: defineAsyncComponent(() => import('@/icons/Mark.vue')),
    color: '#7ddcff',
    tip: '标记为重点',
    value: 'important',
  },
  {
    icon: defineAsyncComponent(() => import('@/icons/Question.vue')),
    color: '#ff9ecb',
    tip: '标记为问题',
    value: 'question',
  },
  {
    icon: defineAsyncComponent(() => import('@/icons/Brush.vue')),
    color: ' #cdcdd6',
    tip: '取消标记',
    value: '',
  },
]

const route = useRoute()
const useCourseStore = useCourse()
const { keyWords, showSearchInput, courseInfo, videodomRef, viewType } =
  storeToRefs(useCourseStore)
const scrollTopH = ref(0)
const domRef = ref(null)
const top = ref()
const hoverSegment = ref<any>({})
const handleMouseEnter = (item: any) => {
  hoverSegment.value = item
}
const handleMouseLeave = () => {
  hoverSegment.value = {}
}
const initParagraphs = ref([]) // 初始化数据
const videoParagraphs = reactive<any>({
  AudioInfo: {},
  Paragraphs: [],
  speakerList: [],
}) // 视频段落
const video_time = ref(0)
const searchLimit = ref(0)
const searchIndex = ref(0)
const selectedGraphId = ref('')
const playGraphId = ref('')
const selectedMark = ref([]) // 标记
const onlyMarked = computed({
  get() {
    return selectedMark.value.length > 0
  },
  set(value) {
    selectedMark.value = value ? ['important', 'question'] : []
  },
})
const checkList = ref([]) // 勾选的发言人
const showSpeaker = ref(true) // 显示发言人
const selectedAll = computed({
  get() {
    return videoParagraphs.speakerList.length === checkList.value.length
  },
  set(value) {
    videoParagraphs.speakerList = videoParagraphs.speakerList.map((item) => {
      return {
        ...item,
        checked: value,
      }
    })
    checkList.value = value
      ? videoParagraphs.speakerList.map((item) => item.SpeakerId)
      : []
  },
})

const handleToggleMark = (i) => {
  if (!selectedMark.value.includes(i.value)) {
    selectedMark.value.push(i.value)
  } else {
    selectedMark.value = selectedMark.value.filter((item) => item !== i.value)
  }
  handleMarkChange()
}
const handleMarkChange = () => {
  let list = initParagraphs.value
  videoParagraphs.Paragraphs = list.filter((item) => {
    if (selectedMark.value?.length) {
      return (
        checkList.value.includes(item.SpeakerId) &&
        selectedMark.value.includes(item.Tag)
      )
    } else {
      return checkList.value.includes(item.SpeakerId)
    }
  })
}
/**
 * ai 改写
 */
const handleTranslateFromAI = async (type?: any) => {
  if (viewType.value === 3) {
    useCourseStore.setViewType(0)
    return
  }
  useCourseStore.setViewType(type)
  if (videoParagraphs.Paragraphs[0]?.aiTranslate) {
    return
  }
  const res: any = await httpGetContentByKey({
    task_id: courseInfo.value?.task_id,
    file_key: courseInfo.value?.file_keys?.polish,
    id: courseInfo.value.id,
  })
  if (res) {
    videoParagraphs.Paragraphs.forEach((item, index) => {
      item.aiTranslate = res[index]?.FormalParagraphText
    })
  }
}
provide('handleTranslateFromAI', handleTranslateFromAI)
/**
 * 显示语言设置
 * @param type
 */
const handleSetViewType = async (type: number) => {
  viewType.value === type && type === 1 ? (type = 2) : (type = 1)
  useCourseStore.setViewType(type)
  if (videoParagraphs.Paragraphs[0]?.Sentences) {
    return
  }
  const res: any = await httpGetContentByKey({
    task_id: courseInfo.value?.task_id,
    file_key: courseInfo.value?.file_keys?.translate,
    id: courseInfo.value.id,
  })
  if (res) {
    videoParagraphs.Paragraphs.forEach((item, index) => {
      item.Sentences = res.Paragraphs[index]?.Sentences
    })
  }
}
const handleClickSearch = () => {
  useCourseStore.setShowSearchInput(!showSearchInput.value)
  nextTick(() => {
    if (!showSearchInput.value) {
      handleCancelSearch()
    }
  })
}
const handleSearch = (type = 'next') => {
  if (keyWords.value?.trim()?.length) {
    if (!searchLimit.value) {
      let count = 0
      videoParagraphs.Paragraphs.forEach((item: any) => {
        if (!item.init) {
          item.init = item.html
        }
        let itemHtml = ''
        const item_arr = item.init.split(keyWords.value)
        if (item_arr.length > 1) {
          item_arr.forEach((h, i) => {
            itemHtml +=
              h +
              (i >= item_arr.length - 1
                ? ''
                : `<span class="highlight" id="high-light-${count}">${keyWords.value}</span>`)
            count += 1
          })
          count -= 1
          item.html = itemHtml
        }
      })
      if (count) {
        searchLimit.value = count
        searchIndex.value = 1
      }
    } else {
      if (searchLimit.value === 1) {
        return
      }
      if (type === 'next') {
        if (searchIndex.value === searchLimit.value) {
          searchIndex.value = 1
        } else {
          searchIndex.value++
        }
      } else {
        if (searchIndex.value === 1) {
          searchIndex.value = searchLimit.value
        } else {
          searchIndex.value--
        }
      }
    }
    nextTick(() => {
      setSearchIndexSelected()
    })
  }
}

const setSearchIndexSelected = () => {
  const span_documents: Element[] = Array.from(
    document.getElementsByClassName('highlight'),
  )
  span_documents.forEach((el: Element) => {
    el.classList.remove('selected')
  })
  const selected: Element | null = document.getElementById(
    'high-light-' + (searchIndex.value - 1),
  )
  if (selected) {
    selected.classList.add('selected')
    selectedGraphId.value = selected.parentElement.getAttribute('data-id')
    // selectedGraphIndex.value = selected.getAttribute('data-index')
    setSearchVideoTime()
  }
}

const setSearchVideoTime = () => {
  if (selectedGraphId.value === playGraphId.value) {
    return
  }
  try {
    videoParagraphs.Paragraphs.forEach((paragraph: any) => {
      if (paragraph.ParagraphId === selectedGraphId.value) {
        playGraphId.value = paragraph.ParagraphId
        videodomRef.value.currentTime = paragraph?.Words[0]?.Start / 1000
      }
    })
  } catch {}
}

watch(
  () => keyWords.value,
  () => {
    handleCancelSearch()
  },
)

const handleCancelSearch = () => {
  searchIndex.value = 0
  searchLimit.value = 0
  videoParagraphs.Paragraphs.forEach((item: any) => {
    item.html = item.init ? item.init : item.html
  })
}

const handleScroll = (e) => {
  scrollTopH.value = e.target.scrollTop
}
const backToTop = () => {
  scrollTopH.value = 0
  domRef.value.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
const mapRefs = ref<any>({})
const mapSegment = (el, start) => {
  mapRefs.value[start] = {
    el,
    time: start,
  }
} // 映射dom
const selectedDomId = ref(null)
const handleSelect = (e, item) => {
  if (selectedDomId.value == item.ParagraphId) {
    selectedDomId.value = null
  } else {
    selectedDomId.value = item.ParagraphId
  }

  if (item.ParagraphId === playGraphId.value) {
    return
  }
  playGraphId.value = item.ParagraphId
  if (item.Words[0]?.Start) {
    video_time.value = item.Words[0].Start / 1000
    videodomRef.value.currentTime = item.Words[0].Start / 1000
    videodomRef.value.pause()
  }
}
const handleScrollToDom = () => {
  const targetElement = document.getElementById(selectedDomId.value)
  targetElement &&
    targetElement.scrollIntoView({
      behavior: 'smooth',
    })
}
/**
 * 获取视频详情
 * @param value
 */
const getVideoDetail = async (value: number) => {
  try {
    const res: any = await httpGetVideoDetail({ id: value || route.params?.id })
    if (res) {
      useCourseStore.setCourseInfo(res)
      await nextTick()
      const { file_url } = res
      videodomRef.value.src = file_url
    }
  } catch (error) {
    console.error(error)
  } finally {
  }
}

/**
 * 获取总结
 */
const getSummary = async () => {
  const res: any = await httpGetContentByKey({
    task_id: courseInfo.value?.task_id,
    file_key: courseInfo.value?.file_keys?.trans,
    id: courseInfo.value.id,
  })
  if (res) {
    const { AudioInfo, Paragraphs, AudioSegments } = res
    useCourseStore.setAudioSegments(AudioSegments)
    videoParagraphs.AudioInfo = AudioInfo
    initParagraphs.value = Paragraphs
    videoParagraphs.Paragraphs = Paragraphs.map((item: any) => {
      item.Words.forEach((text: any) => {
        text.TextArr = [{ label: text.Text }]
      })
      const html = item.Words.reduce((pre: string, next: any) => {
        return pre + next.Text
      }, '')
      if (
        !videoParagraphs.speakerList.some((x) => item.SpeakerId == x.SpeakerId)
      ) {
        videoParagraphs.speakerList.push({
          SpeakerId: item.SpeakerId,
          Tag: item.Tag,
          ParagraphId: item.ParagraphId,
        })
      }
      return {
        ...item,
        html: html,
        init: html,
      }
    })
    checkList.value = videoParagraphs.speakerList.map((item) => item.SpeakerId)
  }
}

const rightPanelRef = ref(null)
const handleAddToNote = async (value) => {
  let html
  if (value === 'origin') {
    html = videoParagraphs.Paragraphs.reduce((pre, next) => {
      return pre + `<p>${next.init}</p>`
    }, '')
  } else if (value === 'ai') {
    if (!videoParagraphs.Paragraphs[0]?.aiTranslate) {
      await handleTranslateFromAI()
    }
    html = videoParagraphs.Paragraphs.reduce((pre, next) => {
      return pre + `<p>${next.aiTranslate}</p>`
    }, '')
  } else if (value === 'important' || value === 'question') {
    html = videoParagraphs.Paragraphs.reduce((pre, next) => {
      return next.Tag === value ? pre + `<p>${next.init}</p>` : pre
    }, '')
  }
  if (!html.trim()) {
    return
  }
  rightPanelRef.value.handleSave(html, true)
}
watch(
  () => route.params?.id,
  async (value: string | null) => {
    if (value) {
      await getVideoDetail(parseInt(value))
      await nextTick()
      await getSummary()
    }
  },
  {
    immediate: true,
  },
)
onMounted(() => {
  videodomRef.value.addEventListener('timeupdate', () => {
    let currentTime = videodomRef.value.currentTime
    video_time.value = currentTime * 1000
    handleScrollToTarget(currentTime)
  })
})
let domTop = ref<any>({})
const handleScrollToTarget = (currentTime: number) => {
  if (JSON.stringify(mapRefs.value) !== '{}') {
    let obj: any = Object.values(mapRefs.value)
      .reverse()
      .find((item: any) => {
        return currentTime * 1000 >= item.time
      })
    if (domTop.value && domTop.value?.time == obj?.time) {
      return
    } else {
      domTop.value = obj
      let top: any = obj?.el?.offsetTop
      domRef.value.scrollTo({
        top: top,
        behavior: 'smooth',
      })
    }
  }
}

/**
 * @description: 标记
 */
const handleMark = async (item: any, i: any) => {
  const res = await httpMarkText({
    id: courseInfo.value.id,
    paragraph_id: item.ParagraphId,
    tag: i.value,
  })
  if (res) {
    item.Tag = i.value
  }
}

function dragControllerDiv() {
  let resize: any = Array.from(document.getElementsByClassName('resize'))
  let left: any = document.getElementsByClassName('left')
  let mid: any = document.getElementsByClassName('right')
  let box: any = document.getElementsByClassName('video-container')
  for (let i = 0; i < resize?.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e) {
      //颜色改变提醒
      // resize[i].style.background = '#818181'
      resize[i].style.background = '#ccc'
      let startX = e.clientX
      resize[i].left = resize[i].offsetLeft
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        let endX = e.clientX
        let moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
        let maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
        // 左边最大宽度为400px
        // if (moveLen > 500) {
        //   moveLen = 500
        // }
        // if (moveLen < 32) {
        //   moveLen = 32
        // } // 左边区域的最小宽度为32px
        if (moveLen > maxT - 150) {
          moveLen = maxT - 150
        } //右边区域最小宽度为150px
        resize[i].style.left = e.clientX // 设置左侧区域的宽度
        for (let j = 0; j < left.length; j++) {
          left[j].style.width = moveLen + 'px'
          mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
        }
      }
      // 鼠标松开事件
      document.onmouseup = function () {
        //颜色恢复
        resize[i].style.background = '#d6d6d6'
        document.onmousemove = null
        document.onmouseup = null
        resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      }
      resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false
    }
  }
}
onMounted(() => {
  dragControllerDiv()
})
</script>
<style scoped lang="scss">
.light {
  color: #fff;
}
.origin {
  color: #000;
}
.searched {
  color: orange;
}
:deep(.highlight) {
  background-color: rgba($color: orange, $alpha: 0.4);
  z-index: 1;
  &.selected {
    background-color: rgba($color: orange, $alpha: 0.8);
    color: #000;
  }
}
.transcripts-wrapper {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0 0 20px;
  background-color: #f4f7fc;
  .left {
    display: flex;
    flex-direction: column;
    .video-wrapper {
      .video-tools {
        padding: 0 30px;
      }
    }
    .speaker-wrapper {
      flex: 1;
      height: 100%;
      overflow: hidden;
      position: relative;
      .spokesman {
        padding: 20px 20px 0 0;
        height: 100%;
        overflow-y: auto;
        @include scrollBar;

        .spoke-item {
          padding: 10px;
          background-color: #fff;
          margin-bottom: 20px;
          border-radius: 10px;
        }
      }
      .backtop {
        position: absolute;
        bottom: 60px;
        right: 10px;
        z-index: 99;
        width: 30px;
        height: 30px;
        color: #fff;
        background-color: #56565e;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .achor {
        position: absolute;
        bottom: 20px;
        right: 10px;
        z-index: 99;
        width: 30px;
        height: 30px;
        color: #fff;
        background-color: #56565e;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

@media screen and (max-width: 1400px) {
  .video-player {
    height: 260px !important;
  }
}

@media screen and (min-width: 1401px) and (max-width: 1920px) {
  .video-player {
    height: 360px !important;
  }
}

@media screen and (min-width: 1921px) {
  .video-player {
    height: 460px !important;
  }
}
.item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    color: #645def;
    background-color: #e0dfff;
    border-radius: 5px;
  }
  .translate {
    // background-color: #645def;
    background-color: #56565e;
    border-radius: 4px;
    color: #fff;
    display: block;
    width: 18px;
    text-align: center;
    &:hover {
      // color: #645def;
      color: #fff;
      background-color: #645def !important;
    }
  }
  .selected {
    color: #fff;
    background-color: #645def !important;
  }
}
.speaker-list {
  margin-left: 20px;
  .el-checkbox {
    display: flex;
    :deep(.el-checkbox__label) {
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.icon-hover {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  &:hover {
    scale: 1.2;
  }
}
.activemark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #ccc;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  font-size: 32px;
  color: white;
}

.resize:hover {
  color: #444444;
}
</style>
